<template>
  <div>
    <div class="search-form" style="width: 200px">
      <el-select v-model="key" placeholder="请选择搜索选项" size="large" style="width: 240px">
        <el-option v-for="item in keyEnum" :key="item.key" :label="item.label" :value="item.key" />
      </el-select>
      <el-select
        multiple
        collapse-tags
        v-model="status"
        placeholder="请选择搜索选项"
        size="large"
        style="width: 240px"
      >
        <el-option
          v-for="item in [
            { value: 'SUCCESS', label: '成功' },
            { value: 'ERROR', label: '失败' },
            { value: 'PADDING', label: '等待' },
            { value: 'WARNING', label: '警告' }
          ]"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        />
      </el-select>
      <el-input size="small" v-model="value" :placeholder="placeholderText"></el-input>
      <el-button type="text" @click="queryBook">查询</el-button>
    </div>
    <div>
      <el-table
        :data="tableData"
        :row-height="50"
        :virtul-scroll="true"
        style="width: 1200px"
        ref="dataRef"
        class="data-table"
        size="small"
        @sort-change="sortChange"
      >
        <el-table-column prop="_id" label="id" min-width="200px"></el-table-column>
        <el-table-column prop="title" label="书名"></el-table-column>
        <el-table-column prop="authot" label="作者"></el-table-column>
        <el-table-column prop="isbn" label="编号"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="status" :sort-method="sortMethod" sortable label="状态">
          <template v-slot="{ row }">
            <span>{{ statusEnum[row.status] }}</span></template
          >
        </el-table-column>
        <el-table-column prop="description" label="备注" min-width="200px"></el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { nextTick, onMounted, reactive, ref, toRefs, watch } from 'vue'
import { queryBooksApi } from '@/api/books/books.js'
const keyEnum = [
  {
    key: 'title',
    label: '书名'
  },
  {
    key: 'authot',
    label: '作者'
  },
  {
    key: 'isbn',
    label: '编号'
  },
  {
    key: 'quantity',
    label: '数量'
  },
  {
    key: 'status',
    label: '状态'
  }
]
const statusEnum = {
  SUCCESS: '成功',
  ERROR: '失败',
  PADDING: '等待',
  WARNING: '警告'
}

const tableData = ref([])
const state = reactive({
  key: '',
  value: '',
  booksAllData: [],
  placeholderText: '',
  status: ['SUCCESS', 'ERROR', 'PADDING']
})
const dataRef = ref()
// 行排序回调
const sortMethod = (a, b) => {
  // 找到当前行在list数据的下标
  let indexA = tableData.value.findIndex((item) => item._id === a._id)
  let indexB = tableData.value.findIndex((item) => item._id === b._id)
  // 升序
  if (orderType.value === 'ascending') return indexA - indexB
  // 降序
  else return indexB - indexA
}
const orderType = ref('')
// 点击排序回调
const sortChange = ({ column, prop, order }) => {
  // 判断哪个字段需要排序
  if (prop === 'status') orderType.value = order
  console.log({ column, prop, order })
  queryBooksData()
}
watch(
  () => state.key,
  (value) => {
    if (!value) return
    console.log(keyEnum.find((item) => item.key === value).label)
    state.placeholderText = '请输入' + keyEnum.find((item) => item.key === value).label
    console.log(value)
  }
)
// 查询图书数据
const queryBooksData = async () => {
  const obj = {}
  obj[state.key] = state.value
  const { data } = await queryBooksApi(removeEmptyProperties({ status: state.status }))
  state.booksAllData = data.list
  tableData.value = data.list
}

onMounted(() => {
  // queryBooksData()
})
const scrollTop = () => {
  console.log(111)
}
const queryBook = () => {
  queryBooksData()
}
// 移除空数据
const removeEmptyProperties = (obj) => {
  for (const key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      // 检查属性值是否为空字符串、null 或 undefined
      if (obj[key] === '' || obj[key] === null || obj[key] === undefined) {
        // 删除该属性
        delete obj[key]
      }
    }
  }
  return obj
}
nextTick(() => {
  const table = document.querySelector('.data-table')
  table.addEventListener('wheel', () => {
    scrollTop()
  })
})
const { key, value, placeholderText, status } = toRefs(state)
</script>
<style lang="scss">
.el-table .cell {
  height: 50px;
}
.data-table {
  height: 500px;
  overflow: auto;
}
</style>
